<template>
	<view class="content">
		<view style="width: 100%;" >
			<my-echarts style="width: 100%;"  :option="option"></my-echarts>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import myEcharts from './components/echarts.vue'
	export default {
		components: {
			myEcharts
		},
		data() {
			return {
				ids: 'myEchart',
				chart: null,
				option: {
					xAxis: {
						type: 'category',
						name: '小时',
						boundaryGap: false,
						nameTextStyle: {
							color: 'white'
						},
						data: ['2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24'],
						axisLabel: {
							interval: 0 // 显示全部刻度
						},
						axisLabel: {
							color: 'white' // 这里设置 Y 轴字体颜色为红色
						}
					},
					yAxis: {
						type: 'value',
						name: '毫米',
						nameTextStyle: {
							color: 'white'
						},
						interval: 5, // 设置刻度间隔为 50
						min: 0, // 设置最小值
						max: 30, // 设置最大值
						boundaryGap: [0, '30%'],
						axisLabel: {
							color: 'white' // 这里设置 Y 轴字体颜色为红色
						}
					},
					series: [{
						type: 'line',
						symbol: 'none',
						lineStyle: {
							color: '#5470C6',
							width: 1
						},
						symbol: 'circle',
						symbolSize: 10,
						itemStyle: {
							color: 'rgb(40,117,248)', // 数据点颜色
							borderColor: '#fff', // 数据点边框颜色
							borderWidth: 2 // 数据点边框宽度
						},
						markLine: {
							symbol: ['none', 'none'],
							label: {
								show: false
							},
							data: [{
									xAxis: 0
								},
								{
									xAxis: 1
								},
								{
									xAxis: 2
								},
								{
									xAxis: 3
								},
								{
									xAxis: 4
								},
								{
									xAxis: 5
								},
								{
									xAxis: 6
								},
								{
									xAxis: 7
								},
								{
									xAxis: 8
								},
								{
									xAxis: 9
								},
								{
									xAxis: 10
								},
								{
									xAxis: 11
								},
								{
									xAxis: 12
								},
							]
						},
						areaStyle: {
							color: 'rgba(20, 52, 124, 0.5)'
						},
						emphasis: {
							focus: 'series'
						},
						data: [
							['2', 3],
							['4', 5],
							['6', 8],
							['8', 10],
							['10', 13],
							['12', 14],
							['14', 16],
							['16', 20],
							['18', 22],
							['20', 24],
							['22', 26],
							['24', 28],
						]
					}]
				},
				flag: false
			}
		},
		onLoad() {

		},
		methods: {
			initECharts() {
				const ctx = uni.createCanvasContext('myChart', this);
				this.chart = echarts.init(ctx, null, {
					width: 375,
					height: 500
				});
				// this.setEChartOption();
			},
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100px;
	}

</style>